<template>
  <div class="articles">
    <h3
      class="title"
      v-html="info.title"
      @click="
        $router.push('/home/shareInfo/' + info.id + '?repath=' + $route.path)
      "
    ></h3>
    <div
      class="con van-multi-ellipsis--l2"
      @click="
       $router.push('/home/shareInfo/' + info.id + '?repath=' + $route.path)
      "
    >
      {{ info.content }}
    </div>
    <div class="other">
      <img class="o1" :src="baseUrl + info.author.avatar" alt="" />
      <span class="o2">{{ info.author.nickname }}</span>
      <span class="o3">{{ info.updated_at | formatTime }}</span>
      <i class="iconfont o4">&#xe65b;</i>
      <span class="o5">{{ info.read }}</span>
      <i class="iconfont o6">&#xe639;</i>
      <span class="o7">{{ info.share }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_URL,
    };
  },
};
</script>

<style lang="less" scoped>
.articles {
  padding: 0 15px;
  .title {
    padding-top: 34px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #181a39;
    line-height: 22px;
    letter-spacing: 0px;
  }
  .con {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #545671;
    line-height: 18px;
    letter-spacing: 0px;
  }
  .other {
    display: flex;
    // text-align: center;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #b4b4bd;
    line-height: 16px;
    letter-spacing: 0px;
    .o1 {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .o2 {
      // flex: 1;
      width: 130px;
      color: #545671;
    }
    .o3,
    .o5 {
      margin-right: 21px;
      flex: right;
    }
    .o4,
    .o6 {
      margin-right: 7px;
      flex: right;
    }
  }
}
</style>